<template>
  <div class="content">
    <div class="main">
      <div class="orderPrice">
        <span class="symbolize">&yen;</span>
        <span class="price">{{ orders.orderPrice }}</span>
      </div>
      <div class="orderContent">
        <p>{{ orders.orderContent }}</p>
        <div
          class="order_pic"
          v-for="(item, index) in orders.orderPicture"
          :key="index"
        >
          <img :src="item" alt />
        </div>
        <div class="detailAddress">
          <van-icon name="location" />
          <p class="addressText" v-text="orders.orderAddress"></p>
        </div>
        <div class="detailExpress"></div>
      </div>
    </div>
    <div class="block" />
  </div>
</template>

<script>
import { Icon } from 'vant';
export default {
    name: 'detailcontent',
    props: ['orders'],
    components: {
        [Icon.name]: Icon
    },
    data () {
        return {
            order: this.orders
        };
    }
};
</script>

<style scoped lang="less">
@orderPriceColor: #f44236;
@baseNotimportantColor: #8c8c8c;
.content {
  background: #fff;
  padding: 10px 16px;
  .main {
    border-top: 1px dashed @baseNotimportantColor;
    .orderPrice {
      .symbolize {
        font-size: 14px;
        color: @orderPriceColor;
      }
      .price {
        font-size: 18px;
        font-weight: bolder;
        color: @orderPriceColor;
      }
    }
    .orderContent {
      font-size: 16px;
      .order_pic {
        width: 100%;
        height: auto;
        padding: 6px 0;
        img {
          border-radius: 10px;
          width: 100%;
          height: 100%;
        }
      }
      .detailAddress {
        display: flex;
        box-sizing: border-box;
        padding: 0 10px;
        align-items: center;
        font-size: 14px;
        background-color: #F5F4F9;
        border-radius: 20px;
        color: @baseNotimportantColor;
        .addressText {
          font-size: 12px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          margin-left: 6px;
        }
      }
    }
  }
  .block {
    height: 50px;
  }
}
</style>
